﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SignalR MoveShape Demo</title>
    <style>
        #shape{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.4.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script>
    $(function() {
        var moveShapeHub = $.connection.moveShapeHub,
            $shape = $("#shape"),
            messageFrequency = 10,
            updateRate=1000/messageFrequency,
            shapeModel = { left: 0, top: 0 },
            moved=false;
        moveShapeHub.client.updateShape = function(model) {
            shapeModel = model;
            //$shape.css({ left: model.left, top: model.top });
            $shape.animate(shapeModel, { duration: updateRate, queue: false });
        };
        $.connection.hub.start().done(function() {
            $shape.draggable({
                drag: function() {
                    shapeModel = $shape.offset();
                    moved = true;
                }
            });
            setInterval(updateServerModel, updateRate);
        });
        function updateServerModel() {
            if (moved) {
                moveShapeHub.server.updateModel(shapeModel);
                moved = false;
            }
        }
    });
</script>
<div id="shape"></div>
</body>
</html>